<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      button {
        margin-right: 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <!-- 内联$event变量 -->
      <button @click="addCount('addCount', $event)">Count自增：{{count}}</button>
      
      <!-- 内联箭头函数 -->
      <button @click="(event)=>{addNumber('addNumber', event)}">Number自增：{{number}}</button>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      data() {
        return {
          // 试着修改以下属性值，看看HTML中的变化
          count: 0,
          number: 0,
        };
      },
      methods: {
        addCount(params, event) {
          console.log(event);
          this.count++;
        },
        addNumber(params, event) {
          console.log(event);
          this.number++;
        },
      }
    }).mount('#app');
  </script>
</html>